<!DOCTYPE html >
<html>
<head>
<meta name="Generator" content="TPshop v1.1" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>欢迎语设置</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<link rel="stylesheet" href="../../css/footer.css">
<link rel="stylesheet" href="../../css/font_my/iconfont.css">

<style type="text/css">
	body,html{
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		overflow-x: hidden;
		color:#555555;
		background: #fff;
	}
	p{
		margin:0;
	}


	input{
		outline: none;
		border:none;
		width: 100%;
		/*font-size: 16px;*/
/*		border-top: none;
		border-left: none;
		border-right: none;
		border-bottom: 1px solid #ccc;*/
	}
	.messageOne{
		width: calc(100% - 20px);
		padding: 10px 10px;
		display: flex;
		line-height: 30px;
		border-bottom: 1px solid #eaeaea;
		background: #fff;

	}

	.messageOneL{
		width: calc(100% - 75px);
		font-weight: bold;
		/*font-size: 18px;*/

	}
	.messageOneR{
		width: 75px;
		color:#666666;
	}


	/*按钮*/
	.testswitch {
	    position: relative;
	    float: left; 
	    width: 70px;
	    margin: 0;
	    -webkit-user-select:none; 
	    -moz-user-select:none; 
	    -ms-user-select: none;
	}
	 
	.testswitch-checkbox {
	    display: none;
	}
	 
	.testswitch-label {
	    display: block; 
	    overflow: hidden; 
	    cursor: pointer;
	    /*border: 2px solid #999999; */
	    border-radius: 20px;
	}
	 
	.testswitch-inner {
	    display: block; 
	    width: 200%; 
	    margin-left: -100%;
	    transition: margin 0.3s ease-in 0s;
	}
	 
	.testswitch-inner::before, .testswitch-inner::after {
	    display: block; 
	    float: right; 
	    width: 50%; 
	    height: 30px; 
	    padding: 0; 
	    line-height: 30px;
	    font-size: 14px; 
	    color: white; 
	    font-family: 
	    Trebuchet, Arial, sans-serif; 
	    font-weight: bold;
	    box-sizing: border-box;
	}
	 
	.testswitch-inner::after {
	    content: attr(data-on);
	    padding-left: 10px;
	    background-color: #4f81d4; 
	    color: #FFFFFF;
	}
	 
	.testswitch-inner::before {
	    content: attr(data-off);
	    padding-right: 10px;
	    background-color: #EEEEEE; 
	    color: #999999;
	    text-align: right;
	}
	 
	.testswitch-switch {
	    position: absolute; 
	    display: block; 
	    width: 30px;
	    height: 30px;
	    margin: 0px;
	    background: #eaeaea;
	    top: 0; 
	    bottom: 0;
	    right: 36px;
	    /*border: 2px solid #999999; */
	    border-radius: 20px;
	    transition: all 0.3s ease-in 0s;
	}
	 
	.testswitch-checkbox:checked + .testswitch-label .testswitch-inner {
	    margin-left: 0;
	}
	 
	.testswitch-checkbox:checked + .testswitch-label .testswitch-switch {
	    right: 0px; 
	}


	.setsOne{
		width: calc(100% - 20px);
		padding: 10px 10px;
		display: flex;
		border-bottom: 1px solid #eaeaea;
	}
	
	.setsOneC{
		width: calc(100% - 20px);
		line-height: 35px;
		text-indent: 10px;
		font-size: 17px;

	}
	.setsOneR{
		width: 20px;
		text-align: right;
		line-height: 35px;
		font-size: 17px;
	}




	



</style>

</head>
<body>
	<div class="phone">
		<div class="messageOne">
			<div class="messageOneL">欢迎语开关</div>
			<div class="messageOneR">
				<div class="testswitch">
					<input class="testswitch-checkbox" id="onoffswitch" type="checkbox">
					<label class="testswitch-label" for="onoffswitch">
						<span class="testswitch-inner" data-on="ON" data-off="OFF"></span>
						<span class="testswitch-switch"></span>
					</label>
				</div>
			</div>
		</div>
		<div class="setsOne" onclick="window.location.href='greet.html'">
			<div class="setsOneC">欢迎语</div>
			<div class="setsOneR"><i class='iconfont icon-arrow-right-copy'></i></div>
		</div>

	
	</div>

<script src='../../js/jquery.js'></script>
<script type="text/javascript">
	var num = 0;
		var onoffswitch = document.querySelector("#onoffswitch")
	if(num==1){
		onoffswitch.checked = true
	}else{
		onoffswitch.checked = false

	}
	$(document).ready(function() {
	$("#onoffswitch").on('click', function(){
		clickSwitch()
	});
 
	var clickSwitch = function() {
		if ($("#onoffswitch").is(':checked')) {
			console.log("在ON的状态下");
		} else {
			console.log("在OFF的状态下");
		}
	};
});


	// console.log($)

</script>
</body>
</html>